<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Header from './Header.vue'
import Footer from './Footer.vue'
</script>

<template>
   <div class="common-layout">
    <el-container>
      <!-- 头部导航 -->
      <el-header>
        <Header></Header>
      </el-header>
      <!-- \头部导航 -->
      <!-- 主体内容 -->
      <el-main class="content"><RouterView /></el-main>
      <!-- \主体内容 -->
      <!-- 底部 -->
      <el-footer>
        <Footer></Footer>
      </el-footer>
      <!-- \底部 -->
    </el-container>
  </div>

</template>

<style lang="scss" scoped>
.common-layout{
  padding: 0;
  margin: 0;
  .el-header{
    height: 160px;
    padding: 0;
  }
  .content{
    background-color: #f5f5f5;
  }
}
</style>
